<template>
    <Dialog :app-dialog="appDialog">
        <div class="title-box">
            <el-form
                ref="ruleFormRef"
                :model="searchForm"
                :rules="rules"
                label-width="auto"
                class="formData"
                @submit.prevent>
                <el-form-item label="门店搜索">
                    <el-input
                        v-model="searchForm.search_value"
                        style="width: 280px"
                        placeholder="请输入门店名称/门店地址"
                        suffix-icon="Search"
                        @input="seachFun"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-table
            v-if="tableData.length"
            ref="multipleTableRef"
            height="500"
            :data="tableData"
            style="width: 100%"
            class="table-box"
            header-row-class-name="table_header_title"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="编码" width="60">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="名称" width="120">
                <template #default="scope">
                    {{ scope.row.store_name ? scope.row.store_name : '--' }}
                </template>
            </el-table-column>
            <el-table-column label="行政区域" width="120">
                <template #default="scope">
                    {{ scope.row.regional_area ? scope.row.regional_area : '--' }}
                </template>
            </el-table-column>
            <el-table-column label="地址">
                <template #default="scope">
                    {{ scope.row.store_address ? scope.row.store_address : '--' }}
                </template>
            </el-table-column>

            <el-table-column label="经纬度" width="150">
                <template #default="scope">
                    <div>经度{{ scope.row.lat }}</div>
                    <div>纬度{{ scope.row.lon }}</div>
                </template>
            </el-table-column>
            <el-table-column label="门店员工" width="80">
                <template #default="scope">
                    {{ scope.row.staff_num ? scope.row.staff_num : '0' }}
                </template>
            </el-table-column>
            <el-table-column label="所属分组" width="100">
                <template #default="scope">
                    {{ scope.row.group_name ? scope.row.group_name : '--' }}
                </template>
            </el-table-column>
            <el-table-column label="创建人" width="100">
                <template #default="scope">
                    {{ scope.row.created_name ? scope.row.created_name : '--' }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="170">
                <template #default="scope">
                    {{ scope.row.created_at ? scope.row.created_at : '--' }}
                </template>
            </el-table-column>
            <el-table-column label="状态" width="80">
                <template #default="scope">
                    <span :style="{ color: scope.row.store_status == 1 ? '#60B900' : '#969696' }">
                        {{ scope.row.store_status == 1 ? '正常' : '关闭' }}
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
        <div class="page-limit-box">
            <!-- <div class="left"
        >共<span>{{ formData.total }}</span
        >条</div
      > -->
            <Pagination ref="PaginationRef" @submit="onPage" />
        </div>
    </Dialog>
</template>

<script lang="ts" setup>
import Pagination from '@/components/Pagination.vue';
import Dialog from '@/components/Dialog.vue';
import ZWPagination from '@/components/ZWPagination.vue';
import { getSensitivelist } from '@/api/employe/storemanagement/sensitiveWord';
import { nextTick, ref, warn, watch, customRef } from 'vue';
import { useStore } from '@/store';
const store = useStore();
const PaginationRef: any = ref(null);

const multipleTableRef: any = ref(null);
const emit = defineEmits(['submit', 'updatePage']);
const searchForm = ref({
    search_value: '',
    group_id: 'all',
    page: 1,
    page_size: 15
});
const tableData = ref([]);
let chooseStoreList: any = []; //当前选中的数据
const cancelHandel = () => {
    emit('updatePage');
    appDialog.value.visible = false;
};

const submitHandel = () => {
    emit('submit', chooseStoreList);
    appDialog.value.visible = false;
};

const appDialog = ref({
    visible: false,
    title: '选择门店',
    width: '1300px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存',
    chooseIdList: []
});
// 获取列表接口
const getListFun = () => {
    getSensitivelist(searchForm.value).then((r: any) => {
        r.data = r.data || [];
        tableData.value = r.data;
        nextTick(() => {
            if (appDialog.value.chooseIdList.length > 0) {
                tableData.value.forEach((item: any) => {
                    const index = appDialog.value.chooseIdList.findIndex((it: any) => {
                        return it == item.id;
                    });
                    multipleTableRef.value.toggleRowSelection(item, index > -1 ? true : false);
                    if (index > -1) {
                        chooseStoreList.push(item);
                    }
                });
            }
            appDialog.value.chooseIdList = [];
        });
        PaginationRef.value.total = r.total;
    });
};
const onPage = (v: any) => {
    searchForm.value.page = v.page;
    searchForm.value.page_size = v.page_size;
    getListFun();
};
const getRowFun = (row: any) => {};
// 搜索
const seachFun = v => {
    const timer: any = null;
    if (window.timeout) clearTimeout(window.timeout);
    window.timeout = setTimeout(() => {
        searchForm.value.page = 1;
        getListFun();
    }, 800);
};

// 分页
const pageChangeFun = (val: any) => {
    searchForm.value.page = val.page;
    searchForm.value.page_size = val.page_size;
    getListFun();
};

// 选择数据
const handleSelectionChange = (val: any) => {
    chooseStoreList = val;
};
watch(
    () => appDialog.value.visible,
    (val: boolean) => {
        if (val) {
            chooseStoreList = [];
            getListFun();
        }
    }
);

defineExpose({
    appDialog,
    chooseStoreList
});
</script>

<style lang="scss" scoped>
.title-box {
    display: flex;

    // justify-content: flex-end;
}
</style>
